<link rel="stylesheet" type="text/css" href="/static/plugins/webupload/webuploader.css">
<link rel="stylesheet" type="text/css" href="/static/plugins/webupload/style.css">
<style>
    .close-upimg{position: relative;bottom: 0px;width: 170px;height: 30px;background: rgba(0,0,0,.5);text-align: center;line-height: 30px;color: white;font-size: 16px;font-weight: bold;cursor:pointer;display: none;}
    .oneImg:hover .close-upimg{display: block;position: relative;bottom: 30px;}
</style>
<div class="box-content">
    <form class="form-horizontal bv-form"  role="form"  id="updateForm">
        <input type="hidden" id="article_id"  name='id' value="{$id}">
        <div class="form-group">
            <label class="col-sm-3 control-label">添加图片</label>
            <div class="input-group col-sm-7">
                <input type="hidden" id="data_photo" name="photo" value="{$images}" >
                <div class="input-group col-sm-12 images" style="border:2px dashed #DEDEDE;">
                    <img id="img_data" height="100px"  src="/static/img/no_img.jpg" />
                    {if condition="!empty($photo)"}
                    {foreach  name="$photo" item="vo"}
                    <div class='oneImg' style='width:170px;height:100px;float:left;margin-left:10px;margin-top:10px;margin-bottom:10px;'>
                        <img width='170px' height='100px'  src='static/uploads/images/{$vo}' onclick='imgDisplay(this)' style='cursor:pointer' />
                        <p class="close-upimg" onclick="imgDel(this)">删除</p>
                    </div>
                    {/foreach}
                    {/if}
                </div>
                <div id="fileList" class="uploader-list" style="float:left"></div>
                <div id="imgPicker" style="margin-top:20px;float:right">选择图片</div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="/static/plugins/webupload/webuploader.min.js"></script>
<script>
    /*******************************多图上传***********************************/

    var $list = $('#fileList');
    var imgArr = [];//存储上传路径
    var uploader = WebUploader.create({
        //配置压缩的图片的选项 false不压缩
        compress: {
            // width: 1600,
            // height: 1600,
            // quality: 90,// 图片质量，只有type为`image/jpeg`的时候才有效。
            // allowMagnify: false,// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            // crop: false,// 是否允许裁剪。
            // preserveHeaders: true,// 是否保留头部meta信息。
            // noCompressIfLarger: false,// 如果发现压缩后文件大小比原来还大，则使用原来图片 // 此属性可能会影响图片自动纠正功能
            compressSize: 2097152,//单位字节，如果图片大小小于此值，不会采用压缩
        },
        //配置生成缩略图的选项。
        // thumb:{
        //     width: 110,
        //     height: 110,
        //     quality: 70, // 图片质量，只有type为`image/jpeg`的时候才有效。
        //     allowMagnify: true,// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
        //     crop: true, // 是否允许裁剪。
        //     type: 'image/jpeg'// 为空的话则保留原有图片格式// 否则强制转换成指定的类型。
        // },
        auto: true,// 选完文件后，是否自动上传。
        swf: '/static/admin/js/webupload/Uploader.swf',// swf文件路径
        server: "{:url('Dashboard/upload')}",// 文件接收服务端。
        duplicate: true,// 重复上传图片，true为可重复false为不可重复
        pick: {
            id: '#imgPicker',// 选择文件的按钮
            multiple: true,//true多图上传 false单图上传
            // label: '选择图片'
        },
        // chunked: true,  // 分片上传大文件
        // chunkRetry: 10, // 如果某个分片由于网络问题出错，允许自动重传多少次？
        // thread: 100,// 最大上传并发数
        // method: 'POST',//默认post
        fileNumLimit: 3, //限制上传个数
        fileSingleSizeLimit: 10 * 1024 * 1024, //限制上传单张图片文件大小，单位是B，1M=1024000B
        // fileSizeLimit: 20* 1024 * 1024,// 总上传限制大小
        // 只允许选择图片文件。
        accept: {
            title: 'Images',//文字描述
            extensions: 'jpg,jpeg,bmp,png',//允许的文件后缀
            mimeTypes: 'image/jpg,image/jpeg,image/png,image/bmp'//允许的文件后缀
        }
    })

    //上传前监听
    uploader.on('fileQueued', function(file) {
        if($('#img_data').css('display') == 'inline'){
            $('#img_data').hide();
        }
        //存放图片的父元素
        var $fa = $("<div class='oneImg' style='width:170px;height:100px;float:left;margin-left:10px;margin-top:10px;margin-bottom:10px;display:none;'></div>");
        $fa.appendTo($('.images'));
        //展示图片元素
        var $show = $("<img  width='170px' height='100px'  id='" + file.id + "'  onclick='imgDisplay(this)' style='cursor:pointer' />");
        $show.appendTo($fa);
        var $img0 = $('<p class="close-upimg" onclick="imgDel(this)"></p>');//删除按钮
        $img0.html('删 除').appendTo($fa);
        if ($('.images').find(".oneImg").length > uploader.options.fileNumLimit) {
            uploader.removeFile(file, true);
            $('#'+file.id).parent().remove();
        }
    });

    // 文件上传成功
    uploader.on( 'uploadSuccess', function( file,response ) {
        $('#'+file.id).attr('src','static/uploads/images/' + response._raw);
        $('#'+file.id).parent().css('display','');
        var article_id = $("#article_id").val();
        // $.ajax({
        //     url:"{:url('Dashboard/updatePhoto')}",
        //     type:'post',
        //     dataType:'json',
        //     data:'add='+response._raw+'&id='+article_id,
        //     success:function(res){
        //         if(res.code == 200){
        //
        //         }
        //     }
        // })
        // if($('.images').find(".oneImg").length == uploader.options.fileNumLimit){
        //     if($('#imgPicker').css('display') == 'block') {
        //         $('#imgPicker').hide();
        //     }
        // }
        // imgArr.push($("#data_photo").val());
        var img =  $("#data_photo").val().split(',');
        img.push(response._raw);//返回的图片地址存入imgArr
        $("#data_photo").val(img);
    });
    /**
     * imgDel 删除预览图
     * @param obj
     */
    function imgDel(obj){
        // if($('.images').find(".oneImg").length == 1){
        //     layer.msg('最少上传一张图片',{icon:2,shade:0.1,time:1500})
        // }else{
            var src = $(obj).prev().attr('src');
            var id = $(obj).prev().attr("id");
            var article_id = $("#article_id").val();
            var img =  $("#data_photo").val().split(',');
            //删除imgArr中的元素
            for(var i=0; i<img.length; i++) {
                if('static/uploads/images/'+img[i] == src) {
                    img.splice(i,1);
                    break;
                }
            }
            $("#data_photo").val(img);
            // $.ajax({
            //     url:"{:url('Dashboard/imgDelete')}",
            //     type:'post',
            //     dataType:'json',
            //     data:'add='+src+'&id='+article_id,
            //     success:function(res){
            //         if(res.code == 200){
                        $(obj).parent().remove();//移除预览图
                        var numUp = $('.images').find(".oneImg").length;
                        // if(numUp < uploader.options.fileNumLimit){
                        //     if($('#imgPicker').css('display') == 'none') {
                        //         $('#imgPicker').css('display', '');
                        //     }
                        // }
                        // console.log(numUp);
                        if(numUp == 0){
                            $('#img_data').show();
                            // $('#message').remove();//提示信息删除
                            uploader.reset();//重置队列
                        }
                        if(id != undefined){
                            uploader.removeFile(id,true);//删除队列的文件
                        }
            //         }
            //     }
            // })
        // }
    }

    //错误信息提示
    uploader.on('error', function (code) {
        // var err = '';
        switch (code) {
            case 'F_EXCEED_SIZE':
                layer.msg('系統提示单张图片大小不得超过'+  uploader.options.fileSingleSizeLimit/1024/1024 + 'MB！',{icon:2,shade:0.1,time:1500});
                break;
            // case 'Q_EXCEED_NUM_LIMIT':
            //     layer.msg('最多只能上传'+  uploader.options.fileNumLimit + '张！',{icon:2,shade:0.1,time:1500});
            //     break;
            case 'Q_EXCEED_SIZE_LIMIT':
                layer.msg('系統提示上传图片总大小超出'+ uploader.options.fileSizeLimit/1024/1024 +'MB！',{icon:2,shade:0.1,time:1500});
                break;
            case 'Q_TYPE_DENIED':
                layer.msg('无效图片类型，请上传正确的图片格式！',{icon:2,shade:0.1,time:1500});
                break;
            // default:
            // // err += '上传错误，请刷新！';
            // layer.msg('上传错误，请刷新！',{icon:2,shade:0.1,time:1500});
            // break;
        }
    });

    // // //上传事件前
    // uploader.on( 'fileQueued', function( file ) {
    //     $list.html( '<div id="message">正在上传...</div>');
    // });

    //页面加载判断
    $(function(){
        if($('.images').find(".oneImg").length > 0){
            if($('#img_data').css('display') == 'inline'){
                $('#img_data').hide();
            }
        }
        // if($('.images').find(".oneImg").length == uploader.options.fileNumLimit){
        //     if($('#imgPicker').css('display') == 'block'){
        //         $('#imgPicker').hide();
        //     }
        // }else{
        //     if($('#imgPicker').css('display') == 'none') {
        //         $('#imgPicker').show();
        //     }
        // }
        imgArr.push($("#data_photo").val());
    })

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        $("#"+file.id).parent().remove();//移除预览图
        uploader.removeFile(file.id,true);//删除队列的文件
    });
    /*******************************多图上传***********************************/
</script>
